<template>
  <div>
    <div>姓名:{{t.name }}</div>
    <div>年龄:{{t.age }} <button @click="t.age++">+</button></div>
    <div>点赞:{{ t.likeNum }} <button @click="t.likeNum++">+</button></div>
  </div>
</template>
<!-- 
    vue3中监听响应式的数据或者计算属性有如下两种方式
    1、watch
    2、watchEffect来完成
 -->
<script lang='ts' setup>
import {reactive,watchEffect} from 'vue'

let t=reactive({
    name:'giles',
    age:20,
    likeNum:10
})

watchEffect(()=>{
    console.log('----------------');
    t.age
    t.likeNum
    
})
</script>

<style lang='scss' scoped>
</style>